import React from 'react'
import ReactDOM from 'react-dom'
import fetch from 'isomorphic-fetch'
import { SearchOutlined} from '@ant-design/icons';
import { Input,Menu, Dropdown, Icon , List, Avatar,Button,Carousel } from 'antd';
import whitelogo from './../img/newsucai/whitelogo.png'
import bg from './../img/newsucai/bg.png'
import lastlogo from './../img/newsucai/lastlogo.png';


var storage = window.localStorage;

class Register extends React.Component {
  constructor(props) {
    super(props)

  }

  state = {
    dd_mobile:"",
    dd_openid:"",
    dd_nicknamecn:""
  }

  handlesfz=()=>{
    if(event && event.target && event.target.value){
      let value = event.target.value;
     // alert(value)
     this.setState(()=>({dd_mobile:value }))
   }

 }

 handlechangeregister=()=>{
  //alert(this.state.sfz)
 //alert(JSON.stringify(this.state.openid));
  fetch("/admin/user/register", {
    method: 'POST',
    mode: 'cors',
    // credentials: 'include',
    headers: {
      'Content-Type': 'application/json',
        'Authorization':'Bearer '+storage.token 
    },
    body: JSON.stringify({"data":this.state})
  }
  ).then(response =>
  {
if(response.status == '4x0x1')
{
  alert("权限认证过期，重新登陆！")
  this.props.history.push({pathname:'/xpz/noqx'});
}
  else

   return response.text();
 }).then(data=>{
 // alert(data);
  if(data=='N')
    {alert("手机不存在或已被绑定！")}
  else 
    {alert("绑定成功")
  
      this.props.history.push({pathname:'/xpz/registered',state:{}});


}
 
});



}


componentDidMount(){

  document.title="光盘行动";
  if(storage.id)
    {this.setState({
      dd_openid:storage.dd_openid
    });}

}


inputOnBlur=()=>{
  window.scroll(0,0);
}


render() {
  return (
    <div>
    <div style={{width:"100vw",height:"36vh",backgroundColor:"#5FC58E",position:"relative",
    fontSize:"2rem",textAlign:"center",color:"white"}}> 
    <div style={{height:"3vh",position:"relative",left:"0",top:"8vh",backgroundColor:""}} >
</div>


    <div style={{height:"12vh",position:"relative",left:"5vw",top:"2vh",backgroundColor:"",left:"0"}} >
    <div style={{height:"10vh",position:"absolute",left:"0",backgroundColor:"",top:"14vh"}}><img src={lastlogo} style={{height:"10vh",position:"relative",left:"5vw",position:"absolute",top:"3vh"}}/></div>
    <div style={{top:"20vh",left:"15vw",position:"absolute"}}><h1 style={{fontSize:"1.58rem",textAlign:"left",color:"white",fontWeight:"700",height:"1.8rem",textIndent:"3rem"}}>光盘行动</h1></div>

</div>
    </div>


    <div style={{width:"100vw",height:"64vh",position:"relative",backgroundImage:"linear-gradient(to bottom, white , #F0F0F0)",
    fontSize:"2rem",textAlign:"center",color:"white"}}> 

    <br/>
    <Input onBlur={this.inputOnBlur} style={{backgroundColor:"rgb(207,226,239)",position:"relative",width:"72%",left:"0",right:"0",margin:"auto",height:"2rem"}}
     placeholder="请输入您的手机号码" onChange={event=>this.handlesfz(event)}/>
       <br/>
    <Input onBlur={this.inputOnBlur} style={{backgroundColor:"rgb(207,226,239)",position:"relative",width:"72%",left:"0",right:"0",margin:"auto",height:"2rem"}}
    placeholder="请输入您的公司" onChange={event=>this.handlesfz(event)}/>

    <Button type="primary" onClick={this.handlechangeregister}
     style={{position:"relative",height:"2rem",fontSize:"1rem",width:"72%",left:"0",right:"0",margin:"auto",
    backgroundImage:"linear-gradient(to right, rgb(33,86,145) , rgb(78,154,209))"}} large>点击绑定</Button>
    <div  style={{position:"relative",color:"#2DB5E3",fontWeight:"bolder",height:"2rem",fontSize:"0.6rem",
    width:"72%",left:"0",right:"0",margin:"auto"}} >请绑定您的手机号码以便下次自动登录，<br/>
    我们承诺您的身份信息将受到保护</div>
    </div>

    </div>
    )
}
}

export default Register
//styles
var styles={
  containertyle:{
    height:"92vh",width:"100vw",position:"absolute",
    left:"0",right:"0",margin:"auto",
    top:"0",backgroundImage:"linear-gradient(to bottom right, #00AAEB , #A28CB9)"
  }

}






